$(function () {
    var top1Top = $('.gundong').offset().top;
    $(window).scroll(function (e) {
        if ($(window).scrollTop() > top1Top) {
            $('.aside1').css('display', 'block')
        } else {
            $('.aside1').css('display', 'none');
            return;
        }
        // 循环楼层
        $('.catetop-floor').each(function (index, ele) {
            if ($(window).scrollTop() >= ele.offsetTop) {
                $('.item').eq(index + 1).addClass('active').siblings().removeClass('active')
            }
        })
    })
    //返回顶部
    $('.fh-top').click(function () {
        $('html').stop().animate({
            scrollTop: 0
        }, 500)
    })

    //单个元素点击跳转动画
    $('.item').each(function (i) {
        $(this).click(function () {
            // console.log($(this));
            // console.log($('.catetop-floor').eq(i)[0].offsetTop);
            $('html').stop().animate({
                scrollTop: $('.catetop-floor').eq(i)[0].offsetTop
            }, 500)
        })
    })

    //插入数据
    $.each(allData.fuzhuang, function (i, v) {
       
        //女装区
        $.each(v.nv, function (i, v) {
            var str1,str2,str3,str4,str5;

            if(v.id>=30001&&v.id<=30008){
                str1= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30009){
                str2= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id>=30010&&v.id<=30011){
                str3= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id>=30012&&v.id<=30013){
                str4= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30014){
                str5= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            $('.nv1').append(str1);
            $('.nv2').append(str2);
            $('.nv3').append(str3);
            $('.nv4').append(str4);
            $('.nv5').append(str5);
            // console.log(v);
        })
        //男装区
        $.each(v.nan, function (i, v) {
            var str1,str2,str3;

            if(v.id>=30015&&v.id<=30016){
                str1= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30017){
                str2= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            $('.nan1').append(str1);
            $('.nan2').append(str2);
            // console.log(v);
        })
        //服饰区
        $.each(v.fu, function (i, v) {
            var str1,str2;

            if(v.id>=30018&&v.id<=30025){
                str1= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30026){
                str2= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
           
            $('.fu1').append(str1);
            $('.fu2').append(str2);
            // console.log(v);
        })
        //内衣区
        $.each(v.nei, function (i, v) {
            var str1,str2;

            if(v.id>=30027&&v.id<=30034){
                str1= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30035){
                str2= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            $('.nei1').append(str1);
            $('.nei2').append(str2);
            // console.log(v);
        })
        //运动区
        $.each(v.yun, function (i, v) {
            var str1,str2,str3;

            if(v.id>=30036&&v.id<=30042){
                str1= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30043){
                str2= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            if(v.id==30044){
                str3= `
                <li>
                    <div class="p-img">
                        <a href="javascript:void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-name">
                        <a href="javascript:void(0)">
                        ${v.title}</a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span>
                    </div>
                </li>
                `;
            }
            $('.yun1').append(str1);
            $('.yun2').append(str2);
            $('.yun3').append(str3);
            // console.log(v);
        })
        $.each(v.sui,function(i,v){
            var str1,str2,str3;
            if(v.id>=30045&&v.id<=30050){
                str1=`
                <div>
                    <div>
                        <a href="javascript: void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span></div>
                    <div class="p-name">
                        <a href="">${v.title}</a>
                    </div>
                    <div class="p-btn">
                        <a href="">${v.wenzi}</a>
                    </div>
                </div>    
                    `;
            }
            if(v.id>=30051&&v.id<=30056){
                str2=`
                <div>
                    <div>
                        <a href="javascript: void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span></div>
                    <div class="p-name">
                        <a href="">${v.title}</a>
                    </div>
                    <div class="p-btn">
                        <a href="">${v.wenzi}</a>
                    </div>
                    </div>  
                    `;
            }
            if(v.id>=30057&&v.id<=30062){
                str3=`
                <div>
                    <div>
                        <a href="javascript: void(0)">
                            <img src="${v.louImg}" alt="">
                        </a>
                    </div>
                    <div class="p-price">
                    <span>￥${v.price}</span></div>
                    <div class="p-name">
                        <a href="">${v.title}</a>
                    </div>
                    <div class="p-btn">
                        <a href="">${v.wenzi}</a>
                    </div>
                    </div>  
                    `;
            }
            $('.flder-1').append(str1);
            $('.flder-2').append(str2);
            $('.flder-3').append(str3);
        })

    })

    //楼层导航里页面显示与隐藏
    $('#floor-1 .dj-box ul li').each(function(i){
        // console.log($(this));
        $(this).eq(1).css({
            color: '#FC5F8D'
            // 'border-color': '1px solid #FC5F8D'
        })
        $(this).parents('#floor-1').find('.sec-r-bot ul').eq(0).show().siblings().hide();
        $('#floor-1 .dj-box ul li').eq(0).addClass('bd');
        $(this).mouseenter(function(){
            console.log($(this));
            $(this).addClass('bd').siblings().removeClass('bd')

            $(this).parents('#floor-1').find('.sec-r-bot ul').eq(i).fadeTo(1000,1);
            $(this).parents('#floor-1').find('.sec-r-bot ul').eq(i).show().siblings().hide()
        })

    })
    $('#floor-2 .dj-box ul li').each(function(i){
        // console.log($(this));
        $(this).parents('#floor-2').find('.sec-r-bot ul').eq(0).show().siblings().hide();
        $('#floor-2 .dj-box ul li').eq(0).addClass('bd');
        $(this).mouseenter(function(){
            $(this).addClass('bd').siblings().removeClass('bd')
            $(this).parents('#floor-2').find('.sec-r-bot ul').eq(i).fadeTo(1000,1);
            $(this).parents('#floor-2').find('.sec-r-bot ul').eq(i).show().siblings().hide()
        })

    })
    $('#floor-3 .dj-box ul li').each(function(i){
        // console.log($(this));
        $(this).parents('#floor-3').find('.sec-r-bot ul').eq(0).show().siblings().hide();
        $('#floor-3 .dj-box ul li').eq(0).addClass('bd');
        $(this).mouseenter(function(){
            $(this).addClass('bd').siblings().removeClass('bd')
            $(this).parents('#floor-3').find('.sec-r-bot ul').eq(i).fadeTo(1000,1);
            $(this).parents('#floor-3').find('.sec-r-bot ul').eq(i).show().siblings().hide()
        })

    })
    $('#floor-4 .dj-box ul li').each(function(i){
        // console.log($(this));
        $(this).parents('#floor-4').find('.sec-r-bot ul').eq(0).show().siblings().hide();
        $('#floor-4 .dj-box ul li').eq(0).addClass('bd');
        $(this).mouseenter(function(){
            $(this).addClass('bd').siblings().removeClass('bd')
            $(this).parents('#floor-4').find('.sec-r-bot ul').eq(i).fadeTo(1000,1);
            $(this).parents('#floor-4').find('.sec-r-bot ul').eq(i).show().siblings().hide()
        })

    })
    $('#floor-5 .dj-box ul li').each(function(i){
        // console.log($(this));
        $(this).parents('#floor-5').find('.sec-r-bot ul').eq(0).show().siblings().hide();
        $('#floor-5 .dj-box ul li').eq(0).addClass('bd');
        $(this).mouseenter(function(){
            $(this).addClass('bd').siblings().removeClass('bd')
            $(this).parents('#floor-5').find('.sec-r-bot ul').eq(i).fadeTo(1000,1);
            $(this).parents('#floor-5').find('.sec-r-bot ul').eq(i).show().siblings().hide()
        })

    })





    // 随手购
    $(".btnr").click(function(){
		nextscroll();
	});
	function nextscroll(){
		var vcon = $(".fig-box");
		var offset = ($('.fig-box li').width())*-1;
		vcon.stop().animate({marginLeft:offset},"slow",function(){
			var firstItem = $(".fig-box ul li").first();
			vcon.find(".flder").append(firstItem);
			$(this).css("margin-left","0px");
		});
	};
	/*========左按钮=========*/
	$(".btnl").click(function(){
		var vcon = $(".fig-box");
		var offset = ($(".fig-box li").width()*-1);
		var lastItem = $(".fig-box ul li").last();
		vcon.find(".flder").prepend(lastItem);
		vcon.css("margin-left",offset);
		vcon.animate({marginLeft:"0px"},"slow")
	});
    $('.hov-dian ul li').each(function(i){
        console.log($(this));
        $('.hov-dian ul li:first-child').eq(0).addClass('on')
        $(this).mouseenter(function(){
            // console.log($(this).parents('#floor-6').find('.flder li').eq(i)[0].offsetLeft);
            $(this).parents('#floor-6').find('.flder').animate({
                left: ($(this).parents('#floor-6').find('.flder li').eq(i)[0].offsetLeft)*-1
            },500,function(){
                $(this).parents('#floor-6').find('.hov-dian ul li').eq(i).addClass('on').siblings().removeClass('on')

            })
        })

    })
    
   
})